import React, { useState, useEffect } from 'react';
import { Carousel } from 'antd-mobile';
import Swiper from 'antd-mobile/es/components/Swiper';
import './index.less';
export default function (props) {
  const [state, setState] = useState();

  useEffect(() => {
    //   console.log("轮播图组件",props.img)
  });

  const items = props.img.map((item, index) => {
    return (
      <Swiper.Item key={item.id}>
        <a className="banner_a">
          <img
            src={item.img}
            className="banner_img"
            onLoad={() => {
              //  console.log("---")
            }}
          />
        </a>
      </Swiper.Item>
    );
  });

  return (
    <div>
      {/* <Carousel
            autoplay={true}
            infinite
            // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
            // afterChange={index => console.log('slide to', index)}
        >
            { props.img.length > 0 && props.img.map((item, index) => {
                return (
                    <a key={item.id} className="banner_a">
                        <img src={item.img}
                             className="banner_img"
                             onLoad={() => {
                                //  console.log("---")
                             }}
                        />
                        
                    </a>
                )
            }) }
        </Carousel> */}

      <Swiper loop={true}>{items}</Swiper>
    </div>
  );
}
